/*
 * Project Wok
 *
 * Copyright IBM Corp, 2016-2017
 *
 * Code derived from Project Kimchi
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

// Core variables
@import "modules/wok-variables";
// Core variables and mixins
@import "vendor/bootstrap-sass/bootstrap/mixins";
// Compass Mixins
@import "vendor/compass-mixins/lib/compass";
// Wok Accordion Mixin
@import "modules/wok-accordion";

#wok-root-container{
    .accordion {
        @include wok-accordion();
    }
}

#plugins-mgmt-content-area {

    .well {
        border: 0;
        padding: 0;
        margin: 0;
        background: transparent;
    }

    #plugins-mgmt-body > .wok-datagrid-row {
        display: flex;
        flex-flow: row wrap;
    }

    #plugins-mgmt-body .handle[aria-expanded=true] .fa-chevron-down  {
        transform: rotate(-180deg);
    }

    #plugins-mgmt-body img {
        width: 40px;
        display: inline-block;
    }

    #plugins-mgmt-body img.disabled {
        filter: opacity(50%);
    }

    span.column-plugin-name,
    div.column-plugin-name {
        width: 20%;
        min-width: 20%;
        flex-basis: 20%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        @media (min-width: $screen-sm + 12) {
            width: 20%;
            min-width: 20%;
            flex-basis: 20%;
        }
    }

    span.column-plugin-description {
        display: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        @media (min-width: $screen-sm + 249) {
            display: inline-block;
            width: 30%;
            min-width: 30%;
            flex-basis: 30%;
        }

        @media (min-width: $screen-lg + 102) {
            display: inline-block;
            width: 40%;
            min-width: 40%;
            flex-basis: 40%;
        }

        @media (min-width: $screen-xlg) {
            display: inline-block;
            width: 50%;
            min-width: 50%;
            flex-basis: 50%;
        }

        @media (min-width: $screen-xlg + 140) {
            flex-basis: auto;
            flex-grow: 1;
            min-width: auto;
            width: auto;
        }
    }

    span.column-plugin-status {
        width: 80px;
        min-width: 80px;
        flex-basis: 80px;
        text-align: center;
        text-transform: capitalize;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        position: relative;
        padding: 10px;
        > input[type="checkbox"] {
            top: 20px;
            left: 20px;
        }
        > label {
            margin-bottom: 0 !important;
            margin-right: 0 !important;
            vertical-align: middle;
        }
    }

    .no-matching-data {
      text-align: center;
      font-size: 14.5pt !important;
      padding: 6px 2px;
      border-top: 1px solid #eee;
    }
}

#wok-confirm-modal .modal-body strong,
.modal-dialog .modal-body strong {
    border-bottom: 1px dotted;
}

.tooltip > .tooltip-inner {
    font-weight: 400;
    font-size: 12.5pt;
    padding: 8px !important;
    max-width: 420px !important;
    text-align: left;
}
